<template>
  <div>
    <common-info-dialog
      :title="dialogTitle"
      :visible.sync="dialogShow"
      :infoLoading="infoLoading"
      @cancel="close"
    >
      <common-group-title style="padding-left: 18px" title="详情" />

      <common-info-table is-bottom-divided is-top-divided>
        <common-info-table-cell label="巡检名称" width="50%">{{
          form.name
        }}</common-info-table-cell>
        <common-info-table-cell label="巡检周期" width="50%">{{
          form.inspectionTime
        }}</common-info-table-cell>

<!--        <common-info-table-cell label="告警周期" width="50%">{{-->
<!--          alarmPeriod-->
<!--        }}</common-info-table-cell>-->
<!--        <common-info-table-cell label="告警频次" width="50%">{{-->
<!--          form.alarmFrequency-->
<!--        }}</common-info-table-cell>-->
<!--        <common-info-table-cell label="告警等级" width="50%">-->
<!--          {{-->
<!--            arrToStringFn(-->
<!--              alarmLevelArr,-->
<!--              form.alarmLevel,-->
<!--              "dictValue",-->
<!--              "dictLabel"-->
<!--            )-->
<!--          }}-->
<!--        </common-info-table-cell>-->
<!--        <common-info-table-cell label="消息优先级" width="50%">-->
<!--          {{-->
<!--            arrToStringFn(-->
<!--              messageProprityArr,-->
<!--              form.msgPriority,-->
<!--              "dictValue",-->
<!--              "dictLabel"-->
<!--            )-->
<!--          }}-->
<!--        </common-info-table-cell>-->
        <common-info-table-cell label="巡检机器">
          {{
            arrToStringFn(
              patrolMachineArr,
              form.inspectionIps,
              "id",
              "dictLabel"
            )
          }}
        </common-info-table-cell>
      </common-info-table>

      <common-group-title style="padding-left: 18px" title="阈值信息" />

      <common-info-table :is-top-divided="true">
        <common-info-table-cell
          v-for="(item, index) in inspectionConfigList"
          :key="index"
          :label="item.remark"
        >
          <span>{{ item.leftThreshold }}~</span>
          <span>{{ item.middleThreshold }}~</span>
<!--          <span v-if="item.leftThreshold && item.rightThreshold"></span>-->
          <span>{{ item.rightThreshold }}</span>
        </common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </div>
</template>

<script>
import {
  threshold_list,
  user_list,
  info_inspection,
} from "@/api/management/system/system.js";

export default {
  components: {},
  props: {
    alarmLevelArr: {
      type: Array,
      default() {
        return [];
      },
    },
    messageProprityArr: {
      type: Array,
      default() {
        return [];
      },
    },
    patrolMachineArr: {
      type: Array,
      default() {
        return [];
      },
    },
    userList: {
      type: Array,
      default: ()=>[]
    },
    columnList: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
      noticeTypeList: [], //通知方式选中
      noticeUsers: [], //通知人选中
      showNotice: false, //是否显示同时
      businessPlateList: [], //工单流程列表
      businessPlateCheckedId: "", //工单流程列表
      dialogShow: false, // 是否显示
      dialogShow2: false, // 是否显示
      thresholdValue: [], //阀值选择，选中['123','456']
      inspectionConfigList: [], //阀值展示列表
      form: {
        inspectionTime: "* * * * * ?",
      },
      treeProp: {
        // 树参数
        children: "children",
        label: "label",
      },
      dialogTitle: "巡检详情",
      noticeArr: [
        {
          label: "短信",
          value: "sms",
        },
        {
          label: "邮件",
          value: "email",
        },
        {
          label: "系统消息",
          value: "message",
        },
      ],
      logicArr: [
        {
          label: "大于",
          value: "GT",
        },
        {
          label: "小于",
          value: "LT",
        },
        {
          label: "等于",
          value: "EQ",
        },
      ],
      infoLoading: false,
    };
  },
  watch: {},
  computed: {
    alarmPeriod: function () {
      let alarmPeriod = "";
      if (this.form.alarmPeriod === "HOUR") {
        alarmPeriod = "小时";
        return alarmPeriod;
      }
      if (this.form.alarmPeriod === "DAY") {
        alarmPeriod = "天";
        return alarmPeriod;
      }
      if (this.form.alarmPeriod === "") {
        alarmPeriod = "";
        this.form.alarmFrequency = "";
        return alarmPeriod, this.form.alarmFrequency;
      }
    },
  },
  methods: {
    /**
     * 获取工单流程列表
     */
    // getBusinessPlateList() {
    //   businessplate_list({ businessPlate: "0" }).then((res) => {
    //     this.businessPlateList = res.result;
    //   });
    // },
    /**
     * 获取巡检详情
     */
    getInfo(id) {
      this.infoLoading = true
      info_inspection({ id: id }).then((res) => {
        // console.log(res.data.inspectionConfigList);
        if(res && res.code === 200) {
          const inspectionIps = res.data.inspectionIps;
          this.$set(
              this.form,
              "inspectionIps",
              inspectionIps ? inspectionIps.split("#") : []
          );
          this.inspectionConfigList = [];
          let configList = res.data.inspectionConfigList;
          if (!!configList) {
            for (var i in configList) {
              let item = configList[i];
              this.inspectionConfigList.push({
                name: item.name,
                logic: item.logic,
                leftThreshold: item.leftThreshold,
                rightThreshold: item.rightThreshold,
                middleThreshold:item.middleThreshold,
                remark: item.remark,
              });
            }
          }
          if (!!this.inspectionConfigList) {
            for (var i in this.inspectionConfigList) {
              let item = this.inspectionConfigList[i];
              this.thresholdValue.push(item.name);
            }
          }

          // console.log(this.inspectionConfigList)

          let noticeContent = eval(res.data.noticeContent);
          this.noticeTypeList = [];
          let accountList = [];
          for (var i in noticeContent) {
            let item = noticeContent[i];
            if (item.noticeType == "workOrder" && item.checked == 0) {
              this.showNotice = true;
              this.businessPlateCheckedId = item.account.split(",")[0];
            } else if (item.noticeType == "message" && item.checked == 0) {
              this.noticeTypeList.push("message");
              accountList = accountList.concat(item.account.split(","));
            } else if (item.noticeType == "email" && item.checked == 0) {
              this.noticeTypeList.push("email");
              accountList = accountList.concat(item.account.split(","));
            } else if (item.noticeType == "sms" && item.checked == 0) {
              this.noticeTypeList.push("sms");
              accountList = accountList.concat(item.account.split(","));
            }
          }
          // 接口编辑之后
          this.noticeUsers = res.data.userIds ? res.data.userIds.split(",") : [];
          this.infoLoading = false
        } else {
          this.$GlobalErrorConfirm('获取信息失败', res.msg, '重新加载').then(() => {
            this.getInfo(id)
          })
        }
      });
    },

    handleNodeClick(data) {},
    /**
     * 关闭
     */
    close() {
      this.dialogShow = false;
    },
    /**
     * 关闭
     */
    close2() {
      this.dialogShow2 = false;
    },

    resetData() {
      this.showNotice = false;
      this.businessPlateCheckedId = "";
      this.noticeTypeList = [];
      this.noticeUsers = [];
      this.thresholdValue = [];

      this.inspectionConfigList = [];
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogShow = true;
      this.form = data.id ? data : this.$options.data().form;

      if (!!data.id) {
        this.getInfo(data.id);
      } else {
        this.resetData();
      }
    },
    arrToStringFn(data = [], arr, key, label) {
      let str = [];
      if (typeof arr != "undefined") {
        if (typeof arr === "string" || typeof arr === "number") {
          // 单选
          if (data && data.length > 0) {
            data.forEach((value) => {
              if (value[key] == arr) {
                str.push(value[label]);
              }
            });
          }
        } else {
          if (arr && arr.length > 0) {
            arr.forEach((v) => {
              data.forEach((value) => {
                if (v == value[key]) {
                  str.push(value[label]);
                }
              });
            });
          }
        }
      }

      return str.join(",");
    },
  },
};
</script>
<style lang="scss" scoped>
.title-block {
  clear: both;
  border-left: 6px solid #000;
  padding-left: 10px;
}

.noticediv {
  width: 160px !important;
  margin-left: 10px;
}

.editselect {
  width: 220px !important;
}

.thresholdselect {
  width: 90px !important;
  float: left;
}

.thresholdinput {
  width: 104px !important;
  float: left;
}

.addThreshold {
  float: right;
  margin-right: 50px;
}

.transfer-box {
  text-align: center;

  ::v-deep {
    .el-transfer {
      height: 50vh;

      .el-transfer-panel {
        height: 100%;
        width: 260px;

        .el-transfer-panel__header {
          .el-checkbox {
            text-align: left;
          }
        }

        .el-transfer-panel__body {
          height: 100%;

          .el-checkbox-group {
            height: 100%;

            .el-checkbox {
              text-align: left;
            }
          }
        }
      }

      .el-transfer__buttons {
        width: 180px;

        .el-button {
          margin-left: 0;

          span {
            margin-left: 0;
          }
        }
      }
    }
  }
}
</style>
